<template>
  <div>
    <el-form
             :rules="myrules"
             :model="loginForm"
             class="loginForm"
    >
      <h2>系统登录</h2>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox checked="checked">记住我</el-checkbox>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
 import {ref,reactive} from "vue";
 import {login} from "@/api/user.js";
 import {ElMessage} from "element-plus";
 import router from "@/router/index.js";

 const loginForm = ref({
    username: '',
    password: ''
  })
  const myrules = reactive({
     username: [
       {required: true, message: '请输入账号', trigger: 'blur'},
       {min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur'}
     ],
     password: [
       {required: true, message: '请输入密码', trigger: 'blur'},
       {min: 2, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur'}
     ]
  });
  const submitForm = () => {

     login(loginForm.value).then(res => {
        console.log(res.data);
        if(res.data.flag){
           let user = res.data.t;
           console.log(user);
           window.sessionStorage.setItem("user",JSON.stringify(user));
           ElMessage.success("登录成功");
           //跳转到首页
           router.push({path: '/index'});

        }else{
           ElMessage({
              message: res.data.message,
              type: 'error'
           });
        }
     });

 }


</script>

<style scoped>
.loginForm{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 15px 35px 15px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  box-shadow: 0 0 25px #caeaea;
}
.captchaImg {
  float: right;
  margin-left: 8px;
  border-radius: 4px;
}

</style>